﻿<navigation:Page 
    x:Class="Perspective.Demo.View.MayaEaseDemo" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
    d:DesignWidth="640" d:DesignHeight="480"
    Title="Perspective : MayaEase">
    <navigation:Page.Resources>
        <Style 
            x:Key="LineStyle"
            TargetType="Line">
            <Setter Property="Stroke" Value="LightGray" />
            <Setter Property="StrokeThickness" Value="1" />
            <Setter Property="StrokeEndLineCap" Value="Triangle" />
        </Style>
        <Style 
            x:Key="ArrowCapStyle" 
            TargetType="Polygon">
            <Setter Property="Stroke" Value="LightGray" />
            <Setter Property="StrokeThickness" Value="1" />
            <Setter Property="Fill" Value="LightGray" />
        </Style>
        <Style 
            x:Key="UpArrowCapStyle" 
            TargetType="Polygon"
            BasedOn="{StaticResource ArrowCapStyle}">
            <Setter Property="Shape.RenderTransform">
                <Setter.Value>
                    <TransformGroup>
                        <RotateTransform CenterX="1.5" CenterY="1.5" Angle="135" />
                        <TranslateTransform X="-1.5" Y="-1.5" />
                    </TransformGroup>
                </Setter.Value>
            </Setter>
        </Style>
        <Style 
            x:Key="RightArrowCapStyle" 
            TargetType="Polygon"
            BasedOn="{StaticResource ArrowCapStyle}">
            <Setter Property="RenderTransform">
                <Setter.Value>
                    <TransformGroup>
                        <RotateTransform CenterX="1.5" CenterY="1.5" Angle="225" />
                        <TranslateTransform X="-1.5" Y="-1.5" />
                        <!--<ScaleTransform ScaleX="2" ScaleY="2" />-->
                    </TransformGroup>
                </Setter.Value>
            </Setter>
        </Style>
        <Storyboard 
            x:Name="storyboard"
            RepeatBehavior="Forever"
            >
            <DoubleAnimation
                x:Name="animation1"
                Storyboard.TargetName="image1" 
                Storyboard.TargetProperty="(Image.Projection).(RotationX)" 
                Duration="0:0:20"
                From="0" To="360"/>
            <DoubleAnimation
                x:Name="animation2"
                Storyboard.TargetName="image2" 
                Storyboard.TargetProperty="(Image.Projection).(RotationX)" 
                Duration="0:0:20"
                From="90" To="450"/>
            <DoubleAnimation
                x:Name="animation3"
                Storyboard.TargetName="image3" 
                Storyboard.TargetProperty="(Image.Projection).(RotationX)" 
                Duration="0:0:20"
                From="180" To="540"/>
            <DoubleAnimation
                x:Name="animation4"
                Storyboard.TargetName="image4" 
                Storyboard.TargetProperty="(Image.Projection).(RotationX)" 
                Duration="0:0:20"
                From="270" To="630"/>
        </Storyboard>
    </navigation:Page.Resources>
    <StackPanel  Margin="10">
        <StackPanel Orientation="Horizontal">
            <Button 
                Name="bMaya" 
                Margin="2"
                Content="Maya In" 
                Click="bMaya_Click" />
            <Button 
                Name="bMaya2" 
                Margin="2"
                Content="Maya In 0.5" 
                Click="bMaya2_Click" />
            <Button 
                Name="bMaya3" 
                Margin="2"
                Content="Maya Out" 
                Click="bMaya3_Click" />
            <Button 
                Name="bMaya4" 
                Margin="2"
                Content="Maya InOut" 
                Click="bMaya4_Click" />
        </StackPanel>

        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Viewbox Grid.Column="0">
                <Grid
                        Height="185"
                        Width="185">
                    <Canvas 
                            Name="canvas"
                            Width="120"
                            Height="120"
                            VerticalAlignment="Bottom"
                            Loaded="Canvas_Loaded"
                            >
                        <Ellipse 
                                Fill="LightGray"
                                Canvas.Left="-1"
                                Canvas.Top="99"
                                Width="2"
                                Height="2"/>
                        <Line 
                                Style="{StaticResource LineStyle}"
                                X1="0" Y1="100" X2="100" Y2="100" />
                        <Polygon
                                Style="{StaticResource RightArrowCapStyle}"
                                Canvas.Top="100"
                                Canvas.Left="100"
                                Points="
                                    0, 0 
                                    0, 3 
                                    3, 3"/>
                        <TextBlock 
                                Canvas.Top="102" Canvas.Left="75" 
                                FontSize="6"
                                Text="{Binding Path=MayaEaseDemo_Time}"/>
                        <Line 
                                Style="{StaticResource LineStyle}"
                                X1="0" Y1="100" X2="0" Y2="0" />
                        <Polygon
                                Style="{StaticResource UpArrowCapStyle}"
                                Canvas.Top="0"
                                Points="
                                0, 0 
                                0, 3 
                                3, 3"/>
                        <TextBlock 
                                Canvas.Top="5" Canvas.Left="-10" 
                                FontSize="6"
                                Text="{Binding Path=MayaEaseDemo_Value}">
                            <TextBlock.RenderTransform>
                                <TransformGroup>
                                    <RotateTransform Angle="-90"/>
                                    <TranslateTransform Y="40" />
                                </TransformGroup>
                            </TextBlock.RenderTransform>
                        </TextBlock>
                    </Canvas>
                </Grid>
            </Viewbox>
            <Grid  Grid.Column="1">
                <Image 
                    Name="image1"
                    Stretch="None" 
                    Margin="10"
                    Source="http://www.odewit.net/Images/Demo/Sunset-s400.jpg">
                    <Image.Projection>
                        <PlaneProjection
                            CenterOfRotationZ="-200"/>
                    </Image.Projection>
                </Image>
                <Image 
                    Name="image2"
                    Stretch="None" 
                    Margin="10"
                    Source="http://www.odewit.net/Images/Demo/Loco01-s400.jpg">
                    <Image.Projection>
                        <PlaneProjection
                            CenterOfRotationZ="-200"/>
                    </Image.Projection>
                </Image>
                <Image 
                    Name="image3"
                    Stretch="None" 
                    Margin="10"
                    Source="http://www.odewit.net/Images/Demo/Guitars01-s400.jpg">
                    <Image.Projection>
                        <PlaneProjection
                            CenterOfRotationZ="-200"/>
                    </Image.Projection>
                </Image>
                <Image 
                    Name="image4"
                    Stretch="None" 
                    Margin="10"
                    Source="http://www.odewit.net/Images/Demo/Pumpkin01-s400.jpg">
                    <Image.Projection>
                        <PlaneProjection
                            CenterOfRotationZ="-200"/>
                    </Image.Projection>
                </Image>
            </Grid>
        </Grid>
    </StackPanel>
</navigation:Page>
